<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>26-常用的html5标签-作业</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			#wrap{width:800px;height:600px;background-color:#ccc;margin:10px auto;border:1px solid transparent;}
			.wrap-section{width:515px;height:385px;margin:25px auto;}
			section > aside{float:left;width:145px;height:385px;}
			section > aside .aside-figure{width:145px;height:190px;background:#111;} 
			section > aside .aside-figure hgroup{width:145px;height:70px;text-align:center;}
			section > aside .aside-figure p{font-size:20px;line-height:45px;color:#fff;	}
			section > aside .aside-figure p span{color:#ff0;}
			section > aside .aside-figure .figure-p{font-size:16px;line-height:0;}
			section > aside .aside-figure img{margin:0 20px;border: 3px solid #ff0;border-radius:50%;}
			section > aside .aside-figure2{float:left;margin-top:5px;background:#ff0;}
			section > aside .aside-figure > figcaption{width:145px;height:25px;border-bottom:1px solid #111;text-align:right;line-height:25px;}
			section > aside .aside-figure > .figcaption1{margin-top:5px;background:#111;border-top:1px solid #111;color:#ff0;}
			section > .wrap-section2 {float:right;width:360px;height:385px;}
			.wrap-section2 header{float:right;width:100%;height:60px;background:#111;}
			.wrap-section2 header hgroup{width:200px;height:30px;margin-top:20px;text-align:center;line-height:30px;font-size:16px;color:#fff;}
			.wrap-section2 header hgroup span{color:#ff0;}
			section > .wrap-section2  section{margin-top:70px;width:360px;height:315px;background:#f6f0f0;}
			section > .wrap-section2  section article{width:340px;height:120px;margin:0 auto;}
			section > .wrap-section2 >  section article summary{width:166px;height:18px;padding:5px 0 10px 0;font-size:16px;}
			section > .wrap-section2 >  section article p{width:340px;height:20px;line-height:20px;color:#ccc;}
			section > .wrap-section2 >  section article .article-p{text-indent:2em;}
			.wrap-section2 .div-div{width:235px;height:155px;margin:15px 0 0 35px;font-size:16px;}
			.wrap-section2 .div-div div{width:235px;margin:10px 0;}
			.wrap-section2 .div-div summary{width:60px;height:20px;}
			.wrap-section2 .div-div div span{display:inline-block;width:80px;height:20px;background:#111;text-align:center;line-height:20px;font-size:12px;color:#fff;}
			.wrap-section2 .div-div div meter{width:150px;height:20px;}
		</style>
	</head>
	<body>

		<div id="wrap">
			<section class="wrap-section">
				<aside>
					<figure class="aside-figure">
						<hgroup>
							<p>Wendy<span>Alex</span></p>
							<p class="figure-p">前端工程师</p>
						</hgroup>
						<img src="../images/h5-1.png" alt="h5-1" width="100" height="100" />
					</figure>
					<figure class="aside-figure aside-figure2">
						<figcaption class="figcaption1">HOME | 家庭住址</figcaption>
						<figcaption>RESUME | 个人简介</figcaption>
						<figcaption>CONTACT | 联系方式</figcaption>
						<figcaption>PORTFOUO | 工作经验</figcaption>
					</figure>
				</aside>
				<section class="wrap-section2">
					<header>
						<hgroup><span>Welcom To</span> My Profile</hgroup>
					</header>
					<section>
						<article>
							<summary>Hello!I'm <mark>Wendy Alex</mark></summary>
							<p>Web developer</p>
							<p class="article-p">祝你学习进步，更上一层楼！(*^__^*)有不会的可以再问我:）祝你学习进步，更上一层楼！(*^__^*)有不会的可以再问我:）祝你学习进步</p>
						</article>	
						<div class="div-div">
							<summary>My Info</summary>
							<div>
								<span>div+css</span>
								<meter max="100" min="0" value="80" high="60" low="30"></meter>
							</div>
							<div>
								<span>javascript</span>
								<meter max="100" min="0" value="70" high="60" low="30"></meter>
							</div>
							<div>
								<span>H5+css3</span>
								<meter max="100" min="0" value="60" high="60" low="30"></meter>
							</div>
							<div>
								<span>character</span>
								<meter max="100" min="0" value="90" high="60" low="30"></meter>
							</div>
						</div>
					</section>
				</section>
			</section>
	
		</div>
		
		
	</body>
</html>
